<template>
	<view class="content">
		<!-- 调用轮播分页器的样式组件 -->
		<uni-swiper-dot :info="list" mode="round"
			:dots-styles="{backgroundColor:'rgba(0,0,0,0.5)',selectedBackgroundColor:'#ffffff',selectedBorder:'#fff'}"
			:current="current">
			<swiper class="swiperCpmtaomer" autoplay @change="changeBanner">
				<swiper-item v-for="item in list" :key="item">
					<image class="img" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 选项卡商品区域 -->
		<view class="tabs">
			<u-sticky bgColor="#fff" offset-top="0">
				<u-tabs :list="list2" lineColor="#d81e06" :activeStyle="{color:'#d81e06'}"
					:inactiveStyle="{color:'black'}" itemStyle="height:44px;width:27%;margin: 0 auto;"
					@change="getGoods" :current="currentTab"></u-tabs>
			</u-sticky>
			<good-list :list="list3"></good-list>
			<view v-show="judge" class="nodatas">
				<image src="../../static/mescroll-empty.png"></image>
			</view>
			<uni-load-more :status="status"></uni-load-more>
			<u-back-top :scroll-top="scropllTop"></u-back-top>

		</view>
	</view>
</template>

<script>
	// 引入请求文件
	import {
		apiBanner,
		apiTabName,
		apiGoods
	} from '../../api/mock'

	export default {
		data() {
			return {
				list: [], //轮播图片
				list2: [], //选项卡名称
				list3: [], //商品信息
				list4: [], //存放商品分类的数据
				indicatorDots: true,
				currentTab: 0,
				current: 0,
				isBottom: false,
				scropllTop: 0,
				p: 1, //当前页码
				num: 6, //每页条数
				status: 'loading',
				judge: false
			}
		},
		onLoad() {
			//调用轮播函数
			this.getBanner();
			this.apiTabName();
			setTimeout(() => {
				this.getGoods({
					// bug :由于请求返回需要 1 秒，为了顺利获取数据设置定时2秒后再执行该函数
					index: 0
				});
			}, 1000);

		},
		// 触底-添加商品的下一页数据
		onReachBottom() {
			this.p++; //每次触底页码自增
			this.status = 'loading';
			//根据最近一次的选项卡改变事件中 获取的选项卡下标提取出名称
			let tabname = this.currentTab == 0 ? '全部' : this.list2[this.currentTab].name;
			console.log('拿到的名称');
			console.log(tabname);
			//获取触底后的页码对应的数据
			apiGoods(this.p, this.num, tabname).then((res) => {
				console.log('是否加载中');
				console.log(res);
				this.list3 = [...this.list3, ...res];
				if (res.length == 0) {
					this.status = "no-more";
				};
			}).catch((err) => {
				console.log(err);
			})
		},
		onPageScroll(e) {
			// console.log(e);
			// console.log('已滚动距离' + e.scrollTop);
			this.scropllTop = e.scrollTop;
		},
		/* 下拉重置整个页面 */
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.currentTab = 0;
				this.getBanner();
				this.apiTabName();
				this.getGoods({
					index: 0
				});
				uni.showToast({
					icon: 'none',
					title: '刷新成功'
				})
			}, 1000)
		},
		methods: {
			getGoods(e) {
				console.log(e);
				this.currentTab = e.index;
				console.log(this.currentTab);
			},
			//轮播的改变事件
			changeBanner(e) {
				this.current = e.detail.current;
			},
			// 调用请求轮播数据的函数
			getBanner() {
				//调用请求
				apiBanner('asc').then((res) => {
					uni.hideLoading();
					res.forEach((item) => {
						this.list.push(item);
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			apiTabName() {
				//调用请求
				apiTabName().then((res) => {
					uni.hideLoading();
					console.log('打印一下');
					res.forEach((item) => {
						console.log(item);
						this.list2.push(item);
					})
					console.log(100);
					console.log(this.list2);
				}).catch((err) => {
					console.log(err);
				})
			},
			//  选项卡的改变事件:永远只能第一页的数据
			getGoods(e) {
				// console.log('打印下标');
				// console.log(e);
				// console.log(e.index);
				this.currentTab = e.index;
				//调用请求
				let tabname = this.list2[e.index].name;
				console.log('点击分类获取数据' + tabname);
				this.p = 1;
				this.list3 = [];
				apiGoods(this.p, this.num, tabname).then((resp) => {
					this.list3 = resp;
					console.log('获取了几条数据');
					console.log(resp);
					if (resp.length == 0) {
						this.status = "no-more";
						this.judge = true;
					}
				}).catch((arr) => {
					console.log(arr);
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
	}

	.swiperCpmtaomer .img {
		width: 100%;
	}

	.tabs {
		width: 100%;

	}
	.nodatas {
		width: 100%;
		
	}
	.nodatas image{
	padding-left: 10%;
	}
</style>